import { onMounted, ref } from 'vue'

const now = new Date()

export const calendarType = ref('date')

export const active = ref<boolean>(false)

// 当前选中的日期
export const selectDate = ref(now.getDate())
export const selectDateTimestamp = ref(now.getTime())

// 当前显示的年月
export const currentYear = ref(now.getFullYear())
export const currentMonth = ref(now.getMonth() + 1)

// 日历的最小日期和最大日期
export const minDate = ref(0)
export const maxDate = ref(0)

// 当前标签页索引
export const tab = ref(1)

// 备忘录数据
const memoList = ref([
  { time: '14:00', content: '这是一条备忘录', id: '1' },
  { time: '14:02', content: '这是一条备忘录', id: '2' },
  { time: '14:10', content: '这是一条备忘录', id: '3' },
  { time: '14:12', content: '这是一条备忘录', id: '4' },
])

export const memoRecord = ref([{}])

export function formatter(day: any) {
  const date = new Date(day.date)
  const now = new Date()

  const year = date.getFullYear()
  const month = date.getMonth()
  const da = date.getDate()
  const nowYear = now.getFullYear()
  const nowMonth = now.getMonth()
  const nowDa = now.getDate()

  if (year === nowYear && month === nowMonth && da === nowDa) {
    day.topInfo = '今天'
    day.bottomInfo = '⭐'
  }
  return day
}

// 设置日历显示范围为指定月份
export function setCalendarToMonth(year: number, month: number) {
  console.log('设置日历显示范围为指定月份', year, month)

  // 设置月初和月末
  const firstDay = new Date(year, month - 1, 1).getTime()
  const lastDay = new Date(year, month, 0).getTime()

  minDate.value = firstDay
  maxDate.value = lastDay

  // 更新当前年月
  currentYear.value = year
  currentMonth.value = month

  // 如果当前选中的日期超出了这个月的天数，则选中这个月的最后一天
  const daysInMonth = new Date(year, month, 0).getDate()
  if (selectDate.value > daysInMonth) {
    selectDate.value = daysInMonth
  }
}

// 设置日历显示范围为当年所有月份（用于月份选择模式）
export function setCalendarToYear(year: number) {
  const firstDay = new Date(year, 0, 1).getTime()
  const lastDay = new Date(year, 11, 31).getTime()

  minDate.value = firstDay
  maxDate.value = lastDay

  currentYear.value = year
}

// 添加备忘录
export function handleAddClick() {
  console.log('添加备忘录')
  // 这里可以打开添加备忘录的弹窗或页面
}

// 标签页切换处理
export function handleTabsClick(e: { index: number }) {
  const index = e.index
  tab.value = index

  if (index === 1) {
    // 切换到日历视图
    calendarType.value = 'date'
    setCalendarToMonth(currentYear.value, currentMonth.value)
  }
  else {
    // 切换到月份选择视图
    calendarType.value = 'month'
    setCalendarToYear(currentYear.value)
  }
}

// 日历变化事件处理
export function handleChange(value: { value: number }) {
  console.log('选择的日期:', value)

  if (calendarType.value === 'month') {
    // 月份选择模式，获取选中的月份
    const selectedDate = new Date(value.value)
    const selectedYear = selectedDate.getFullYear()
    const selectedMonth = selectedDate.getMonth() + 1

    // 切换到日历视图并显示选中的月份
    calendarType.value = 'date'
    tab.value = 1 // 切换到日历标签页
    setCalendarToMonth(selectedYear, selectedMonth)

    console.log(`切换到 ${selectedYear}年${selectedMonth}月`)
    // 设置该月份第一天
    const firstDayTimestamp = new Date(selectedYear, selectedMonth - 1, 1).getTime()
    selectDateTimestamp.value = firstDayTimestamp
    selectDate.value = 1
    loadMemoData(selectedYear, selectedMonth, 1)
  }
  else {
    // 日期选择模式，从时间戳中提取日期
    const selectedDate = new Date(value.value)
    const day = selectedDate.getDate()

    // 同时更新时间戳和日期显示
    selectDateTimestamp.value = value.value
    selectDate.value = day
    loadMemoData(currentYear.value, currentMonth.value, day)
  }
}

// 加载备忘录数据
export function loadMemoData(year: number, month: number, day: number) {
  // 根据年月日加载备忘录数据
  const dateStr = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`

  // 模拟根据日期加载不同的备忘录数据，默认只展示三条
  if (day % 2 === 0) {
    memoList.value = [
      { time: '09:00', content: `${dateStr}的会议安排`, id: `${year}${month}${day}-1` },
      { time: '14:30', content: `${dateStr}的工作任务`, id: `${year}${month}${day}-2` },
      { time: '18:00', content: `${dateStr}的晚餐约会`, id: `${year}${month}${day}-3` },
      { time: '18:00', content: `${dateStr}的晚餐约会`, id: `${year}${month}${day}-4` },
      { time: '18:00', content: `${dateStr}的晚餐约会`, id: `${year}${month}${day}-5` },
    ]

    memoRecord.value = memoList.value.length > 3 ? memoList.value.slice(0, 3) : memoList.value
    if (memoList.value.length > 3) {
      memoRecord.value.push({ time: '查看更多', id: `${year}${month}${day}-6` })
    }
  }
  else {
    memoList.value = [
      { time: '10:00', content: `${dateStr}的学习计划`, id: `${year}${month}${day}-1` },
      { time: '16:00', content: `${dateStr}的运动时间`, id: `${year}${month}${day}-2` },
      { time: '19:00', content: `${dateStr}的晚餐约会`, id: `${year}${month}${day}-3` },
      { time: '18:00', content: `${dateStr}的晚餐约会`, id: `${year}${month}${day}-4` },
      { time: '18:00', content: `${dateStr}的晚餐约会`, id: `${year}${month}${day}-5` },
    ]
    memoRecord.value = memoList.value.length > 3 ? memoList.value.slice(0, 3) : memoList.value
    if (memoList.value.length > 3) {
      memoRecord.value.push({ time: '查看更多', id: `${year}${month}${day}-6` })
    }
  }

  console.log('加载备忘录数据:', dateStr, memoList.value)
}

export async function onPageLoad() {
  // 设置当前月份的日历范围
  setCalendarToMonth(currentYear.value, currentMonth.value)

  // 加载当前日期的备忘录数据
  loadMemoData(currentYear.value, currentMonth.value, selectDate.value)
}
